<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 生命周期钩子函数</title>
</head>
<body>
<div id="app">
    <div ref="element">{{ info }}</div>
    <button v-on:click="info='Hello, Vue! Hello, Vue!'">更新</button>
</div>

<script type="module">
    import {
        createApp,
        ref,
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted
    } from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let info = ref("Hello, Vue!")

                const element = ref(null)
                // console.log(element);

                // The console.group() method creates a new inline group in the Web console log.
                console.group("setup 状态===============================================")
                console.log("%c%s", "color:red", element.value)
                console.log("%c%s", "color:red", info.value)
                console.groupEnd()


                onBeforeMount(
                    () => {
                        console.group("BeforeMount 状态===============================================")
                        console.log("%c%s", "color:green", element.value)
                        console.log("%c%s", "color:green", info.value)
                        console.groupEnd()
                    }
                )

                onMounted(
                    () => {
                        console.group("Mounted 状态===============================================")
                        console.log("%c%s", "color:blue", element.value)
                        console.log("%c%s", "color:blue", info.value)
                        console.groupEnd()
                    }
                )

                onBeforeUpdate(
                    () => {
                        console.group("BeforeUpdate 状态===============================================")
                        // 检测到 info 的值发生了变化，但是还没有将其更新到 UI
                        console.log("%c%s", "color:grey", element.value)
                        console.log("%c%s", "color:grey", element.value.innerText)
                        console.log("%c%s", "color:grey", info.value)
                        console.groupEnd()
                    }
                )

                onUpdated(
                    () => {
                        console.group("Updated 状态===============================================")
                        // 再检测到 info 的值发生变化后，将值更新到 UI 完成。
                        console.log("%c%s", "color:pink", element.value)
                        console.log("%c%s", "color:pink", element.value.innerText)
                        console.log("%c%s", "color:pink", info.value)
                        console.groupEnd()
                    }
                )

                onBeforeUnmount(
                    () => {
                        console.group("BeforeUnmount 状态===============================================")
                        console.log("%c%s", "color:grey", element.value)
                        console.log("%c%s", "color:grey", element.value.innerText)
                        console.log("%c%s", "color:grey", info.value)
                        console.groupEnd()
                    }
                )

                onUnmounted(
                    () => {
                        console.group("Unmounted 状态===============================================")
                        console.log("%c%s", "color:pink", element.value)
                        console.log("%c%s", "color:pink", info.value)
                        console.groupEnd()
                    }
                )

                // console.log(element);
                return {
                    info, element,
                }
            }
        }
    );

    app.mount("#app")

    setTimeout(
        () => {
            console.log("取消挂载");
            app.unmount()
        },
        5000,
    )
</script>
</body>
</html>